<template>
  <!--用户管理-->
  <div class="search">
    <f-drawer :title="modalTitle" :width="800" ref="roleDrawer" @submit="handleSubmit">
      <a-tabs @tabClick="handleTabClick"  :defaultActiveKey="current" v-model="current">
        <a-tab-pane tab="角色信息" key="form1">
          <role-form ref="form1"></role-form>
        </a-tab-pane>
        <a-tab-pane tab="分配权限" key="form2" v-if="isEdit">
          <role-auth ref="form2"></role-auth>
        </a-tab-pane>
        <a-tab-pane tab="分配用户" key="form3" v-if="isEdit">
          <role-user ref="form3"></role-user>
        </a-tab-pane>
      </a-tabs>
    </f-drawer>
  </div>
</template>
<script>

  import RoleForm from './role_form'
  import RoleUser from './role_user'
  import RoleAuth from './role_auth'

  export default {
    name: 'roleModal',
    props: {},
    data () {
      return {
        saving: false,
        isEdit: false,
        title: '',
        current: 'form1',
        roleName: '',
        formData: {},
        forms: [
          'form1',
          'form2',
          'form3'
        ]
      }
    },
    methods: {
      handleShow (data) {
        this.isEdit = false
        this.roleName = ''
        if (data && data.roleId) {
          this.isEdit = true
          this.roleName = data.roleName
          this.formData = data
        } else {
          this.formData = {}
        }
        this.$refs.roleDrawer.show()
        this.handleTabClick('form1')
      },
      handleSubmit (callback) {
        this.$refs[this.current].handleSubmit(callback)
      },
      handleTabClick (name) {
        this.current = name
        if (this.current === this.forms[0]) {
          this.title = this.isEdit ? '编辑角色 - ' : '添加角色'
        }
        if (this.current === this.forms[1]) {
          this.title = '分配权限'
        }
        if (this.current === this.forms[2]) {
          this.title = '分配用户'
        }
        this.$nextTick(() => {
          this.$refs[this.current].setData(this.formData)
        })
      }
    },
    computed: {
      modalTitle: function () {
        return this.title + this.roleName
      }
    },
    created () {

    },
    beforeDestroy () {
    },
    components: { RoleAuth, RoleUser, RoleForm }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
